.main_content {
  width: 100%;
  height: 100%;
  background: #f5f3ff;
  border-radius: 20rpx;
  position: relative;
}

.content {
  width: 100%;
  height: calc(100% - 80rpx);
  padding: 80rpx 0;
}

.title {
  font-size: 48rpx;
  color: #0678B8;
  line-height: 60rpx;
  text-align: center;
}

.box {
  width: 100%;
  height: calc(100% - 60rpx);
  display: flex;
  align-items: center;
}

.chapter {
  width: 100%;
  height: 600rpx;
  position: relative;
}

.chapter_container {
  position: relative;
  width: auto;
  height: 100%;
}

.chapter_content {
  width: auto;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;

  .chapter_box {
    &:first-child {
      margin-left: 80rpx;
    }

    &:nth-child(n) {
      top: 0;
    }

    &:nth-child(2n) {
      top: -60rpx;
    }

    &:nth-child(3n) {
      top: -120rpx;
    }

    &:nth-child(4n) {
      top: -60rpx;
    }

    &:nth-child(5n) {
      top: 0rpx;
    }

    &:nth-child(6n) {
      top: 60rpx;
    }

    &:nth-child(7n) {
      top: 120rpx;
    }

    &:nth-child(8n) {
      top: 60rpx;
    }

    &:nth-child(9n) {
      top: 0;
    }
  }
}

.chapter_box {
  width: 200rpx;
  height: auto;
  margin-right: 160rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  position: relative;

  .chapter_circle {
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .chapter_title {
    width: 360rpx;
    position: absolute;
    bottom: -76rpx;
    left: 50%;
    transform: translateX(-50%);
    font-size: 36rpx;
    line-height: 48rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
  }


  &.complete {

    .chapter_circle {
      background: #f7e169;
      box-shadow: 6rpx 6rpx 0px 0px #edb725;
    }

    .chapter_text {
      font-size: 48rpx;
      color: #fff;
    }

    .chapter_title {
      color: #EDB725;
    }
  }

  &.ing {

    .chapter_circle {
      background: #a3cfed;
      box-shadow: 6rpx 6rpx 0px 0px #0b8bcb;
    }

    .chapter_title {
      color: #0B8BCB;
    }
  }

  &.incomplete {

    .chapter_circle {
      background: #d9d7d7;
      box-shadow: 6rpx 6rpx 0px 0px #949494;
    }

    .chapter_title {
      color: #949494;
    }
  }
}